<template>
	<view class="">
		<view class="p30r bg-zs">
			<view class="bg-fff bor-rad30r p20r">
				<view class="flex ">
					<view class="flex1">项目总数</view>
					<view class="flex1 tc">持续进行</view>
					<view class="flex1 tr">其他状态</view>
				</view>
				<view class="flex mt20r">
					<view class="flex1">{{tasks.count.task_count||0}}</view>
					<view class="flex1 tc">{{tasks.count.not_ready_count||0}}</view>
					<view class="flex1 tr">{{tasks.count.other_count||0}}</view>
				</view>
			</view>
		</view>
		<view class="pl36r pr36r pb28r  x-end bg-zs color-fff">
			<view class="mr30r" @tap='exchange_house_id=item.id,balance=item.balance,strategy()'
				v-for="(item,index) in exchange" :key="index" :class="{'f40r fw-w':exchange_house_id==item.id}">
				{{item.name}}
			</view>
			<!-- <view class="mr30r" @tap='exchange_house_id=2' :class="{'f40r fw-w':exchange_house_id==2}">binance</view> -->
		</view>
		<view class="exchange_bg ">
			<view class="jui_bg_fff jui_lrtop box jui_flex  ">
				<view class="x-bc flex-wrap f28r fw-500 color-zs">
					<view @tap="taskList('即将众筹')" class="w214r p25r x-f bor-rad20r mb20r"
						style="background-color: rgba(26, 84, 147, .1);">
						<image src="../../static/imgs/task/tz.png" class="w34r h34r mr16r" mode=""></image>
						<view class="">即将众筹</view>
					</view>
					<view @tap="taskList('正在进行')" class="w214r p25r x-f bor-rad20r mb20r"
						style="background-color: rgba(26, 84, 147, .1);">
						<image src="../../static/imgs/task/kq.png" class="w34r h34r mr16r" mode=""></image>
						<view class="">正在进行</view>
					</view>
					
					<view @tap="taskList('众筹失败')" class="w214r p25r x-f bor-rad20r mb20r"
						style="background-color: rgba(126, 184, 147, .1);">
						<image src="../../static/imgs/task/qc.png" class="w34r h34r mr16r" mode=""></image>
						<view class="">众筹失败</view>
					</view>
					<view @tap="taskList('众筹完成')" class="w214r p25r x-f bor-rad20r mb20r"
						style="background-color: rgba(240, 50, 50, .1);color: green;">
						<image src="../../static/imgs/task/dc.png" class="w34r h34r mr16r" mode=""></image>
						<view class="">项目完成</view>
					</view>
				</view>
				<!-- 项目列表 -->
				<view class="jui_flex jui_mar_t20 " style="width: 100%;flex-wrap: wrap;align-items: center;">
					<scroll-view class="scroll-view_H  jui_bg_f5f bor-rad20r" scroll-x="true">
						
						<view class="jui_mar_2432" v-for="(item,index) in task_list" :key="index" style="margin-bottom: 40rpx;">
							<view class="jui_flex jui_flex_items_center jui_flex_justify_between" >
								<view class="jui_flex jui_flex_items_center ">
									项目名称 ：  <view class="red" >
										  {{item.name}}
									</view>
									
								</view>
								
								<!-- <view class=" " :class="item.order_status == 10 ? 'jui_fc_zhuse' :item.order_status == 20?'jui_fc_zhuse':'jui_fc_666'">
									{{item.order_status == 10 ? '进行中' :item.order_status == 20?'完成':'撤销' }}
								</view> -->
							</view>
							<view class="jui_mar_l20 jui_fs32 col  jui_mar_t12" style="color: #F03232; display: inline-flex ;">
								众筹总额：{{item.price}} 
								<view class="jui_bg_zhuse jui_fc_fff"
									style="position: absolute;  right: 20rpx; font-size: 34rpx;"
									@tap="submit(item.task_id)">
									查看详情
								</view>
							</view>
							<view class="jui_bor_bottom jui_pad_b20">
								<view class="jui_flex jui_flex_justify_start jui_flex_items_center jui_mar_t20">
									<view class="" style="width: 25%;">
										<view class="jui_fc_999 ">
											里程碑数量
										</view>
										<view class="jui_fc_333  jui_mar_t12">
											{{item.inputItems.length}}
										</view>
									</view>
									<view class="jui_flex_col_center" style="width: 45%;">
										<view class="jui_fc_999 ">
											创建时间
										</view>
										<view class="col  jui_mar_t12">
											{{item.create_time}}
										</view>
									</view>
									<view class="" style="text-align: right;width: 33%;">
										<view class="jui_fc_999 ">
											状态
										</view>
										<view class="col  jui_mar_t12">
											{{item.status}}
										</view>
									</view>
								</view>
								<view class="jui_flex jui_flex_justify_start jui_flex_items_center jui_mar_t20"   v-for="(lcb,index1) in item.inputItems" :key="index1" >
									<view class="" style="width: 95%;">
										<view class="jui_fc_999 ">
											里程碑{{index1+1}}
										</view>
										<view class="jui_fc_333  jui_mar_t12" style="word-wrap: break-word;white-space: pre-wrap; ">
											目标：{{lcb.text}}，金额:{{lcb.price}}
										</view>
									</view>
									
								</view>
								
								
							</view>
							<view style="height: 50rpx;"></view>
						</view>
						
					</scroll-view>
				</view>
				
				<view class="none" v-if="!task_list.length">
					暂无数据
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import vNavigation from '@/components/navigation/navigation.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	export default {
		components: {
			vNavigation,
			uniPopup,
			uniPopupMessage,
			uniPopupDialog
		},
		data() {
			return {
				// exchange_house_id: 1,
             orderlist:[{hash:'123123dasqwaddassadsadw12312das2qewdswadscwadszc', order_type:'投资', exchange_id:3, symbol_name:'RMB', order_status: 20, trade_number: 33, create_time:'2024-12-12', order_price: 323},
				{hash:'123123dasqwaddassadsadw12312das2qewdswadscwadszc', order_type:'充值', exchange_id:2, symbol_name:'RMB', order_status: 20, trade_number: 33, create_time:'2024-12-12', order_price: 323}],
				tabList: [],
				tabIndex: 0,
				emptyData: {
					img: '/static/imgs/home/empty_goods.png',
					tip: '暂无数据~'
				},
				list: [],
				FromToken: '',
				strategy_id: '', //当前策略id
				strategyList: [], //策略列表
				page: 1,
				list_rows: 20,
				hasMore: false,
				tasks:{count:{}},
				taskdeatil: '',
				task_list:[],
				strategy_name: '',

				allSel: false,
				isList: '',

				exchange: '', //交易所
				exchange_house_id: '', //交易所id
				balance: ''
			}
		},
		computed: {},
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url: '/pages/index/exchange/exchange'
			})
		},
		onReachBottom() {
			if (this.hasMore) {
				this.page++;
				this.taskList();
			}
		},
		onPullDownRefresh() {
			this.page = 1;
			if (uni.getStorageSync('task')) {
				this.tabIndex = uni.getStorageSync('task');
			} else {
				this.tabIndex = 0;
			}
			if (uni.getStorageSync('strategy_id')) {
				this.strategy_id = uni.getStorageSync('strategy_id');
				console.log(this.strategy_id)
			}
			if (uni.getStorageSync('strategy_name')) {
				this.strategy_name = uni.getStorageSync('strategy_name');
				// console.log(this.strategy_name)
			}
			this.list = [];
			this.taskList()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onLoad() {
			this.taskMain()
		},
		onShow() {
		},
		onUnload() {
			uni.removeStorage({
				key: 'task',
			});
			uni.removeStorage({
				key: 'strategy_id',
			});
			uni.removeStorage({
				key: 'strategy_name',
			});
		},
		methods: {
			submit(task_id){
				uni.navigateTo({
					url: '/pages/task/commodity_details/commodity_details?task_id='+task_id
				})
				 
			},
			getFromToken() {
				this.$api.getFromToken({
					data: 1
				}).then(res => {
					if (res.code == 1) {
						this.FromToken = res.FromToken;
						this.strategy()
					}
				});
			},
			taskMain() {
				let data = {
				}
				this.$api.getTaskList(data).then(res => {
					if (res.code == 10000) {
						console.log(res.data)
						this.tasks = res.data;
						this.task_list = res.data.task
						
					}
				});
			},
			taskList(status) {
				let data = {
					status: status
				}
				this.$api.getTaskOne(data).then(res => {
					if (res.code == 10000) {
						console.log(res.data)
						this.task_list = res.data.task
						
					}
				});
			},
			
			

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
		height: 100%;
	}

	/deep/ .uni-checkbox-input-checked {
		background-color: $zhuse !important;
	}

	/deep/ .uni-checkbox-input {
		border-radius: 50% !important;
	}


	.purple {
		color: $zhuse;
		border: 1px solid $zhuse;
		border-radius: 8rpx;
		height: 56rpx;
		line-height: 56rpx;
		font-size: 24rpx;
		padding: 0 10rpx;
	}

	.red {
		color: $col-light-red;
		border: 1px solid $col-light-red;
		border-radius: 8rpx;
		height: 56rpx;
		line-height: 56rpx;
		font-size: 24rpx;
		padding: 0 10rpx;
	}

	.agreen {
		color: green;
		border: green solid 1px;

		.ac {
			color: green;
			border: green solid 1px;
		}
	}

	.ayellow {
		color: orange;
		border: orange solid 1px;

		.ac {
			color: orange;
			border: orange solid 1px;
		}
	}

	.ared {
		color: red;
		border: red solid 1px;

		.ac {
			color: red;
			border: red solid 1px;
		}
	}

	.pad_tb {
		padding: 30rpx 10rpx 30rpx 10rpx;
	}

	.col {
		color: $col-light-green;
	}

	.btnList {
		view {
			width: 20%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.tabBox {
		// width: 20%;
		padding: 0 20rpx;
		height: 64rpx;
		// border: 1px solid #737476;
		border-radius: 10rpx;
		margin-bottom: 10rpx;

	}


	.topPlace {
		width: 100%;
		height: var(--status-bar-height);
		background: $zhuse
	}

	.top_box {
		background: $zhuse;
		padding: 40rpx 20rpx;
		padding-top: 60rpx;

		display: flex;
		justify-content: space-around;
		align-items: center;

		view {
			color: #FFFFFF;
			font-size: 48rpx;
		}

	}

	.exchange_bg {
		background: $zhuse;

		// padding-top: 90rpx;
		.box {
			padding: 20rpx 30rpx 0 30rpx;
			flex-wrap: wrap;
		}

		.text-line {
			width: 32rpx;
			height: 32rpx;
			border: 1px solid $zhuse;
			color: $zhuse;
			font-size: 22rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.text-rad {
			width: 32rpx;
			height: 32rpx;
			border: 1px solid $zhuse;
			color: $zhuse;
			border-radius: 50%;
			font-size: 22rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.on {
			color: $zhuse;
			background-color: #F5E0FF;

		}

		.off {
			background-color: #F5F5F5;
		}

		.top_list {
			width: 100%;
		}

		.yingli_box {
			width: 100%;
			margin-top: 30rpx;

			.left,
			.right {
				width: 322rpx;
				height: 144rpx;
				// box-shadow: 0px 0px 10px 0px rgba(23,116,237, 0.1);
				color: #FFFFFF;
				border-radius: 16rpx;
				background: $zhuse;
				// box-shadow: 0px 0px 10rpx 0px rgba(91, 8, 190, 0.1);
			}

		}
	}

	.bor_on {
		color: $zhuse;
		background-color: #FFFFFF;

		.text-line {
			width: 32rpx;
			height: 32rpx;
			border: 1px solid #FFFFFF;
			color: #FFFFFF;
			font-size: 22rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.text-rad {
			width: 32rpx;
			height: 32rpx;
			border: 1px solid #FFFFFF;
			color: #FFFFFF;
			border-radius: 50%;
			font-size: 22rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}





	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item {
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.scroll-view-item_H {
		display: inline-block;
		text-align: center;
		font-size: 36rpx;
		line-height: 64rpx;
	}
</style>
